/**
 * 文件库页面
 *
 */

@import "../../sass/base.scss";
$nodeHeight: 40px;

.file-lib-wrap {
  // width: 90%;
  // height: 100%;
  // position: relative;
  // top: 0px;
  // left: 20px;
  height: 100%;
  width: 100%;
  padding: 32px;
  .file-lib-head {
    height: 70px;
    line-height: 50px;
    font-size: 14px;
    overflow: hidden;
  }

  .file-lib-container {
    // position: absolute;
    // left: 0;
    // right: 0;
    // top: 62px;
    // bottom: 50px;
    // height: 746px;
    height: calc(100% - 70px);
    width: 100%;
    background-color: white;
    overflow: hidden;
    // padding-bottom: 30px;
    @include border-radius(5px);
    @include box-shadow($BoxShadow);
    background: $WhiteColor;
    overflow: hidden;

    $TreeMenuWidth: 240px;
    $HDHeight: 60px;

    .lib-treemenu-wrap {
      width: $TreeMenuWidth;
      height: 100%;
      border-right: 1px solid $ColorE5;
      float: left;
      position: relative;

      .tree-menu-hd {
        height: $HDHeight;
        line-height: $HDHeight;
        padding-left: 18px;
        border-bottom: 1px solid $ColorE5;
      }

      .tree-menu-bd {
        position: absolute;
        top: $HDHeight;
        left: 0;
        right: 0;
        bottom: 0;

        overflow: hidden;
        overflow-y: auto;
        @include scrollbar();

        .tree-edit-wrap {
          .custom-node:hover {
            background: rgb(240, 251, 255);
          }

          .custom-node:active {
            background: rgb(243, 248, 255);
          }
          ::ng-deep .ant-tree li .ant-tree-node-content-wrapper {
            width: 100%;
          }
        }

        .menu-item-database {
          display: block;
          line-height: 53px;
          padding-left: 36px;
          border-bottom: 1px solid $ColorE5;
          text-decoration: none;
        }
      }

      .add-button {
        i {
          color: gray;
          font-size: 20px;
          float: right;
          margin-top: 18px;
          margin-right: 10px;
        }

        i:hover,
        :active {
          color: #419fe5;
        }
      }
    }

    .lib-list-wrap {
      margin-left: $TreeMenuWidth;
      height: 100%;
      position: relative;

      .lib-list-hd {
        height: $HDHeight;
        line-height: $HDHeight;
        padding-left: 20px;
        padding-right: 20px;
        border-bottom: 1px solid $ColorE5;

        .btn-upload-left {
          float: left;
          margin-top: 14px;
          margin-right: 10px;
        }

        .btn-group {
          float: right;
          display: block;

          &.disabled {
            .hd-btn-item {
              color: $ColorC;
              cursor: not-allowed;
            }
          }

          .hd-btn-item {
            display: inline-block;
            color: $PrimaryFontColor;
            margin-right: 20px;
            text-decoration: none;

            i {
              margin-right: 5px;
              font-weight: bold;
              font-size: 20px;
            }
          }

          .hd-btn-item:hover,
          :active {
            opacity: 0.7;
          }
        }
      }

      .lib-list-cont {
        position: absolute;
        top: $HDHeight;
        left: 0;
        right: 0;
        bottom: 0;

        td {
          position: relative;

          &.hover {
            .tools {
              @include opacity(1);
            }
          }
        }

        .tools {
          font-size: 15px;
          transition: all 0.3s ease;
          opacity: 1;

          i {
            color: #999999;
            font-size: 18px;
            &:hover {
              color: #419fe8;
            }
            // margin-right: 10px;
          }

          i:hover,
          :active {
            opacity: 0.7;
          }
        }

        .name-wrap {
          display: inline-block;
          width: 300px;
          position: relative;
          height: 20px;
          @include transition(all 0.3s ease);
          @include text-overflow();

          i {
            color: rgb(59, 175, 252);
            margin-right: 3px;
            font-size: 18px;
          }

          span:hover {
            cursor: pointer;
            color: rgb(59, 175, 252);
          }
        }

        .table-cont {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;

          // overflow: auto;
          // @include scrollbar();
          .table-bread {
            padding: 8px;
            border-bottom: 1px solid $ColorE5;
          }

          // .table-body {

          //    overflow: auto;
          //    @include scrollbar();
          // }
          // .table-col:active{
          //     background: rgb(233, 10, 39)
          // }
        }

        .pager {
          position: absolute;
          text-align: center;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 60px;
          padding-top: 10px;
          border-top: 1px solid $ColorE5;
        }
      }
    }
  }
}

::ng-deep .ant-spin-nested-loading {
  height: 100%;

  .ant-spin-blur {
    height: 100%;
  }
}
::ng-deep .table-body {
  .ant-table-thead > tr > th .ant-table-column-sorter {
    left: 80px;
  }
}

:host ::ng-deep .ant-tree {
  overflow: hidden;
  padding-left: 12px;
  padding-top: 16px;
  // margin: 0 -24px;
  // padding: 0 24px;
}

.custom-node {
  cursor: pointer;
  line-height: $nodeHeight;
  display: inline-block;
  color: $PrimaryFontColor;

  .folder-tools {
    position: absolute;
    right: 0px;
    // top: 5px;
    top: 0px;
    @include transition(all 0.3s ease);
    @include opacity(0);

    i {
      color: rgb(59, 175, 252);
      margin-right: 8px;
    }

    i:hover {
      opacity: 0.7;
    }
  }

  &:hover {
    .folder-tools {
      @include opacity(1);
    }
  }

  &.active {
    background: $AuxiliaryColor;

    // color: #fff;
    .folder-tools {
      @include opacity(1);
    }
  }
}

.file-name,
.folder-name {
  margin-left: 4px;
}

.file-desc,
.folder-desc {
  padding: 0 8px;
  display: inline-block;
  background: #87ceff;
  color: #ffffff;
  position: relative;
  left: 12px;
}

.preview-iframe {
  border: 0;
  width: 100%;
  height: 500px;
}

.qr-code-wrap {
  width: 80%;
  margin: 0 auto;
  text-align: center;

  .qr-code-item {
    display: inline-block;
    width: 256px;
    margin: 10px 20px;

    .qr-code-text {
      display: inline-block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: left;
      @include text-overflow();
    }
  }
}

.tree-move-wrap {
  min-height: 80px;
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
  @include scrollbar();
  border: 1px $ColorE5 solid;

  .tree-move-hd {
    display: inline-block;
    line-height: $nodeHeight;
    margin: 0 -1000px 0 -990px;
    padding: 0 1000px;
  }

  .customMove-node {
    cursor: pointer;
    line-height: $nodeHeight;
    margin-left: 4px;
    display: inline-block;
    margin: -6px -1000px;
    padding: 0 1000px;
    color: $PrimaryFontColor;

    &.active {
      background: $AuxiliaryColor;
    }

    &:hover {
      background: rgb(243, 248, 255);
    }

    input {
      margin-left: 6px;
      width: 50%;
      height: 26px;
    }

    .insertNode-icon {
      font-size: 11px;
      margin-left: 4px;
      padding: 6px;
      background-color: #ffffff;
      color: rgb(75, 168, 243);
      border: rgb(174, 218, 255) 1px solid;
      border-radius: 5px;
    }
  }
}

:host ::ng-deep .ant-table {
  line-height: 1.1;
}

// .choose-file-wrap{
//     $h: 44px;
//     height: $h;
//     border: 1px solid #ccc;
//     position: relative;
//     overflow: hidden;
//     .opacity-file{
//         position: absolute;
//         width: 100%;
//         height: 100%;
//         z-index: 10;
//         @include opacity(0);
//     }
//     .file-name{
//         display: inline-block;
//         height: $h;
//         line-height: $h - 2px;
//         font-size: 12px;
//         position: absolute;
//         top: 0;
//         left: 5px;
//         right: 100px;
//         white-space: nowrap;
//         overflow: hidden;
//         text-overflow: ellipsis;
//     }
//     .btn-file-choose{
//         float: right;
//         margin: 5px;
//     }
// }
// .tip-msg{
//     line-height: 30px;
//     margin: 5px 10px;
//     text-align: left;
//     color: #f00;
//     font-size: 14px;
// }

// .percent-wrap{
//     text-align: center;
// }

// .upload-desc{
//     line-height: 30px;
//     margin: 5px auto;
//     text-align: left;
//     color: #ccc;
//     font-size: 14px;
// }
// .upload-remark{
//     line-height: 30px;
//     margin: 5px auto;
//     text-align: left;
//     color: #f00;
//     font-size: 14px;
// }
.bread-crumb {
  float: left !important;
  // line-height: 62px !important;
}

.hidden {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

:host ::ng-deep .ant-tree li span.ant-tree-iconEle {
  line-height: 19px;
}
